<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="我的"
        right-text="设置"
        @click-right="onClickRight"
      />
    </header>
    <div class="content my">
      <header>
        <van-image
          round
          width="1.5rem"
          height="1.5rem"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
          fit="cover"
        />
        <div class="userName">
          <h4>{{nickName}}</h4>
          <small>{{userName}}</small>
        </div>
      </header>
      <van-grid column-num="5">
        <van-grid-item icon="photo-o" text="待付款" />
        <van-grid-item icon="photo-o" text="待发货" />
        <van-grid-item icon="photo-o" text="待收货" />
        <van-grid-item icon="photo-o" text="待评价" />
        <van-grid-item icon="photo-o" text="已完成" />
      </van-grid>
      <van-cell-group>
        <van-cell title="我的收藏" value="5" />
        <van-cell title="我的地址" value=">>" />
        <van-cell title="我的购物车" value="内容" />
        <van-cell title="我的足迹" value="内容" />
        <van-cell title="我的爱好" value="内容" />
        <van-cell title="我的联系方式" value="内容" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Image as VanImage, Cell, CellGroup, Grid, GridItem, NavBar } from 'vant'
import { getUserMsg } from '../../api/index.js'

Vue.use(VanImage)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(NavBar)

export default {
  data () {
    return {
      avatar: '',
      birthday: '0',
      email: '',
      hobby: [],
      nickName: '临时用户',
      sex: 1,
      tel: '17600901915',
      userName: 'admin'
    }
  },
  mounted () {
    getUserMsg({
      userId: localStorage.getItem('userId')
    }).then(res => {
      console.log(res.data.data)
    })
  },
  methods: {
    onClickRight () {
      this.$router.push('/setUserMsg')
    }
  }
}
</script>

<style lang="scss">
.my{
  header{
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.4rem 0;
    .userName{
      margin-left: 0.4rem;
    }
  }
}
</style>
